import Icon from '@/components/Icon'
import { useAction } from '@/hooks'
import { getUserChannelListAction } from '@/store/actions/home'
import { setActive } from '@/store/modules/home'
import { Popup, Tabs } from 'antd-mobile'
import { useState } from 'react'
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import ArticleList from './components/ArticleList/index'
import Channels from './components/Channels'
import styles from './index.module.scss'
const Home = () => {
  const { userChannel, active } = useAction(getUserChannelListAction, 'home')
  const [channelShow, setChannelShow] = useState(false)
  const dispatch = useDispatch()
  // 切换选中的id
  const changeActive = (e: string) => {
    dispatch(setActive(parseInt(e)))
  }
  const navigate = useNavigate()
  return (
    <div className={styles.root}>
      {/* 频道 Tabs 列表 */}
      {/* 控制Tabs组件整体渲染  */}
      {userChannel.length === 0 ? null : (
        <Tabs
          // activeKey 受控后需要onChange事件去修改黄台
          activeKey={active + ''}
          onChange={(e) => changeActive(e)}
          className="tabs"
          // activeLineMode="fixed" 激活模块下划线
          activeLineMode="auto">
          {userChannel.map((item) => (
            <Tabs.Tab title={item.name} key={item.id}>
              {/* 当前频道新闻列表 */}
              <ArticleList id={item.id} />
            </Tabs.Tab>
          ))}
        </Tabs>
      )}

      {/* 右上角图标 */}
      <div className="tabs-opration">
        <Icon icon="iconbtn_search" onClick={() => navigate('/search')} />
        <Icon icon="iconbtn_channel" onClick={() => setChannelShow(true)} />
      </div>
      <Popup
        visible={channelShow}
        className="channel-popup"
        position="left"
        onMaskClick={() => setChannelShow(false)}>
        <Channels onClose={() => setChannelShow(false)} />
      </Popup>
    </div>
  )
}

export default Home
